<template>
  <div id="bigappbox">
    <div class="inputfatherbox" style="text-align: left;">
      <el-button @click="router.go(-1)">返回</el-button>
    </div>
    <div class="tit">
      <p>这里可以上传您的图片</p>
      <span>单图或者多图上传均可 </span>
    </div>
    <div class="inputfatherbox">
      <span>标题</span>
      <el-input type="text" v-model="title" placeholder="请输入标题(最多65字) " show-word-limit="true" maxlength="65" />
    </div>
    <div class="inputfatherbox">
      <span>详情</span>
      <el-input v-model="notes" :rows="5" type="textarea" placeholder="作品详情"  />
    </div>
    <div class="inputfatherbox">
      <span>类型</span>
      <el-select v-model="classification" class="m-2" placeholder="选择类型" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.classification" />
      </el-select>
    </div>
    <div class="xuantu inputfatherbox">
      <span>图片</span>
      <div class="uploadboxbtn"> 选择图片</div>
      <input type="file" multiple @change="handleChange" name="isimg" class="file" />
    </div>

    <el-button @click="b" class="but">
      上传<el-icon class="el-icon--right">
        <Upload />
      </el-icon>
    </el-button>
  </div>
  <div class="im">
    <img v-for="url in imgList" :src="url" :key="url" alt="">
  </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { uploadList, uploadWordk } from '../api/Uploadyourwork'
import { useRouter } from 'vue-router'
const router = useRouter();
const imgList = ref([])
const title = ref('')
const notes = ref('')
const classification = ref('')
const options = ref([
  {
    classification: '二次元',
    label: '二次元',
  },
  {
    classification: '男士头像',
    label: '男士头像',
  },
  {
    classification: '女生头像',
    label: '女生头像',
  },
  {
    classification: '山川水画',
    label: '山川水画',
  },
  {
    classification: '背景图片',
    label: '背景图片',
  },
])
var handleChange = (e) => {
  imgList.value = []
  let files = e.target.files || e.dataTransfer.files;
  if (files.length > 0) {
    for (let file of files) {
      let reader = new FileReader();
      reader.onload = (e) => {
        imgList.value.push(e.target.result)
      }
      reader.readAsDataURL(file);
    }
  }
}
const b = async () => {
  const imgg = document.querySelector("input[name='isimg']")
  let formDate = new FormData()
  for (let a = 0; a < imgg.files.length; a++) {
    let imggg = imgg.files[a]
    formDate.append('images', imggg)
  }
  let list = await uploadList(formDate)
  if (list) {
    let userID = JSON.parse(localStorage.getItem("user"))._id
    console.log('2222222',
      userID,
      list,
      title.value,
      notes.value,
      classification.value);
    let data = await uploadWordk(
      userID,
      list,
      title.value,
      notes.value,
      classification.value)
    alert('上传成功')
    title.value = "",
    notes.value = "",
    classification.value = ""
    imgList.value = []
  } else {
    alert('上传失败')
  }
}

</script>
<style scoped lang="scss">
#bigappbox {
  min-width: 320px;
  margin: 0 auto;
  text-align: center;

  .tit {
    p {
      font-size: 30px;
    }

    span {
      font-size: 14px;
    }
  }

  .inputfatherbox {
    width: 500px;
    margin: 20px auto 0;
    display: flex;

    span {
      width: 90px;
      line-height: 30px;
    }

    .m-2 {
      width: 500px;
    }
  }


  .xuantu {
    position: relative;
    width: 500px;
    margin: 20px auto 0;
    // background-color: aqua;

    .file {
      width: 500px;
      height: 40px;
      background: #666;
      opacity: 0;
    }

    .uploadboxbtn {
      position: absolute;
      left: 76px;
      width: 424px;
      line-height: 40px;
      font-size: 18px;
      border-radius: 5px;
      border: 1px solid #DFE2E8;
    }
  }

  .but {
    margin: 20px auto;
  }
}

.im {
  width: 400px;
  margin: 0 auto;
  text-align: center;

  img {
    width: 400px;
    border-radius: 10px;
    margin: 5px 10px;
    box-shadow:
      2.4px 1.8px 10px rgba(0, 0, 0, 0.075),
      19px 14px 80px rgba(0, 0, 0, 0.15);
  }
}</style>